<template>
    <div>
        <div class="container">
            <div class="line-ti">
                <div>采购清单</div>
            </div>
            <div class="tab">
                <div class="tabs" :class="{select: type == 4}" @click="changeType(4)">全部清单</div>
                <div class="tabs" :class="{select: type == 1}" @click="changeType(1)">我提交的</div>
                <div class="tabs" :class="{select: type == 2}" @click="changeType(2)">我审核的</div>
                <div class="tabs" :class="{select: type == 3}" @click="changeType(3)">已付款</div>
            </div>
            <div style="height:50px"></div>
            <div class="block">
                <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="list">
                <div @click="navDetail(item)" v-for="(item,index) in list" :key="index" class="items">
                    <img class="select-icon" @click.stop="itemSelect(index)" :src="item.select?$global.Image.icon_checked:$global.Image.icon_checked_grey" />
                    <div class="itm">
                        <div class="setting">
                            <div class="settings">
                                <div class="order-num">{{item.order_id}}</div>
                                <div class="title">{{item.order_name}}</div>
                            </div>
                            <div class="setting-icon" @click.stop="catchTap" style="position:relative">
                                <el-dropdown @command="commandChange">
                                    <img class="el-icon--right el-dropdown-link" src="../../assets/second_icon/setting_icon.png" alt="">
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue('editName',item)" v-if="item.set_name">订单名称修改</el-dropdown-item>
                                        <el-dropdown-item :command="composeValue('edit',item)" v-if="item.edit_allow">编辑清单</el-dropdown-item>
                                        <el-dropdown-item :command="composeValue('explort',item)">导出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <div style="width:5px;border-radius:100%;height:5px;background:#ff0000;position:absolute;top: 5px;right:5px" v-if="item.is_read == 0"></div>
                            </div>
                        </div>

                        <div class="order1">
                            <div>商品种类：{{item.total_num}}</div>
                            <div>总价格：￥{{item.total_price}}</div>
                        </div>
                        <div class="order2">
                            <div>{{item.create_time}}</div>
                            <div :class="{pay: item.is_sys}">{{item.status_text}}</div>
                        </div>
                        <div class="order-status" v-if="item.percentage.show">
                            <div class="order-text">订单进度</div>
                            <el-progress :percentage="item.percentage.value"></el-progress>
                        </div>
                    </div>
                </div>
                <div></div>
                <div></div>
                <div style="clear:both"></div>
                <div class="nodata" v-if="!loading &&!list.length">
                    <img :src="$global.Image.noOrder" />
                </div>
            </div>
            <div class="cart-bottom">
                <div class="container td-fbc">
                    <div class="td-fbc left" style="flex:1">
                        <label class="td-fbc btn-cp" @click="exportGood">
                            导出
                        </label>
                    </div>
                </div>
            </div>
            <div class="pagination-box" v-show="!loading && list.length">
                <el-pagination background layout="prev, pager, next" @current-change="_handelClickPage" :page-size="limit" :total="count"></el-pagination>
            </div>

        </div>
        <div v-show="showDialog">
            <div class="add-address-show">
                <div class="title">
                    <div>清单导出</div>
                    <img :src="$global.Image.icon_close" @click="_cancelDialog" />
                </div>
                <div class="add-input">

                    <div class="email">
                        <div class="email-tit"><span>*</span>收件邮箱</div>
                        <el-input v-model="email" placeholder="请输入收件邮箱"></el-input>
                    </div>
                    <div class="history" v-if="historyEmail.length">
                        <div class="history-list">
                            <div class="" v-for="(item,index) in historyEmail" :key="index" @click="historyClick(item)">
                                <img @click.stop="delHistory(index)" src="../../assets/second_icon/close_icon.png" alt="">
                                {{item}}
                            </div>
                        </div>
                    </div>
                    <div class="choose-type">
                        <div class="cancel" @click="_cancelDialog">取消</div>
                        <div class="confirm" @click="_confirmDialog">确认</div>
                    </div>
                </div>
            </div>
            <div class="dialog-shade"></div>
        </div>
        <v-orderName ref="orderName" :item="selectItem"></v-orderName>
        <v-exportOrder ref="exportOrder" :item="selectItem"></v-exportOrder>
    </div>
</template>

<script>
import { exportProduct } from "@api/user";
import orderName from "@/components/storeView/orderName";
import exportOrder from "@/components/storeView/exportOrder";
import { purchaseList } from "@/api/order";
export default {
    components: {
        "v-orderName": orderName,
        "v-exportOrder": exportOrder,
    },
    data() {
        return {
            loading: false,
            type: 4,
            historyEmail: [],
            page: 1,
            date: "",
            limit: 18,
            email: "",
            count: 0,
            start: "",
            selectGood: [],
            end: "",
            showDialog: false,
            list: [],
            selectId: [],
            selectItem: {},
        };
    },
    mounted() {
        this.getList();
        if (localStorage.getItem("historyEmail")) {
            this.historyEmail = JSON.parse(
                localStorage.getItem("historyEmail")
            );
        }
    },
    watch: {
        date(e) {
            console.log(e);
            if (e == null) {
                this.start = "";
                this.end = "";
                this.getList();
                return;
            }
            this.start = e[0];
            this.end = e[1];
            this.getList();
        },
    },
    methods: {
        delHistory(index) {
            this.historyEmail.splice(index, 1);
            let arr = this.historyEmail;

            localStorage.setItem("historyEmail", JSON.stringify(arr));
            console.log(this.historyEmail, arr);
        },
        historyClick(e) {
            this.email = e;
        },
        _confirmDialog() {
            let that = this;
            if (!that.email) {
                that.$dialog.toast({ mes: "请输入收件邮箱" });
                return;
            }
            if (!that.selectId.length) {
                that.$dialog.toast({ mes: "请选择要导出的订单" });
                return;
            }
            let id = that.selectId;
            let params = {
                type: 1,
                id: id.join(","),
                email: that.email,
            };
            exportProduct(params)
                .then(function (res) {
                    if (res.status != 200) {
                        that.$dialog.toast({ mes: res.msg });
                        return;
                    }
                    let arr =
                        JSON.parse(localStorage.getItem("historyEmail")) || [];

                    arr = arr.concat(that.email);
                    localStorage.setItem("historyEmail", JSON.stringify(arr));
                    that.historyEmail = arr;
                    that.$dialog.toast({ mes: "导出成功，请注意查收邮件。" });

                    that.showDialog = false;
                    setTimeout(() => {
                        that.getList();
                    }, 1000);
                })
                .catch((err) => {
                    that.$dialog.error(err.msg);
                });
        },
        exportGood() {
            let selectGood = this.selectGood;
            let selectId = this.selectId;
            if (selectGood.length == 0) {
                return;
            }
            this.selectGood.map((item, index) => {
                selectId.push(item.id);
            });
            this.selectId = selectId;
            this.showDialog = true;
        },
        _cancelDialog() {
            this.showDialog = false;
        },
        itemSelect(index) {
            this.list[index].select = !this.list[index].select;
            let list = this.list;
            let selectGood = this.selectGood;
            selectGood = [];
            list.map((item, index1) => {
                if (item.select) {
                    selectGood.push(item);
                }
            });
            this.selectGood = selectGood;
            this.$forceUpdate();
        },
        // 获取列表
        getList() {
            if (this.loading) return;
            this.loading = true;
            const { page, limit, type, start, end } = this;
            purchaseList({
                page,
                limit,
                type,
                end,
                start,
            }).then((res) => {
                let data = res.data.list;
                if (data.length) {
                    data.map((item, index) => {
                        item.select = false;
                    });
                }
                this.list = data;
                this.count = res.data.count || 0;
                this.loading = false;
            });
        },
        // 分页
        _handelClickPage(val) {
            this.page = val;
            this.list = [];
            this.getList();
        },
        // 切换状态
        changeType(index) {
            this.type = index;
            this.list = [];
            this.page = 1;
            this.getList();
        },
        catchTap() {},
        // 查看详情
        navDetail(item) {
            this.$router.push({
                path: "/stockDetail/" + item.order_id,
            });
        },
        //
        composeValue(type, row) {
            return {
                type: type,
                row: row,
            };
        },
        commandChange(item) {
            this.selectItem = item.row;
            switch (item.type) {
                case "editName":
                    this.$refs.orderName.open(item.row, () => {
                        this.getList();
                    });
                    break;
                case "edit":
                    this.$router.push({
                        path: "/stockEdit/" + item.row.order_id,
                    });
                    break;
                case "explort":
                    this.$refs.exportOrder.open(item.row, () => {});
                    break;
                default:
                    this.$router.push({
                        path: "/stockEdit",
                    });
            }
        },
    },
};
</script>
<style >
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #da213d;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.el-pagination {
    margin: 65px 0;
    display: flex;
    justify-content: center;
}
.el-progress-bar__outer {
    background: #ffede6;
    height: 10px !important;
}
.el-progress-bar__inner {
    background: linear-gradient(90deg, #ea3c3b, #ff7458);
}
.el-progress__text {
    font-size: 12px;
    color: #da213d;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.line {
    width: 1200px;
    margin: 0 auto 30px;
    img {
        display: block;
        width: 100%;
    }
}
.el-pagination {
    margin: 10px 0;
}
.cart-bottom {
    background-color: #fff;
    left: 0;
    width: 100%;
    .container {
        height: 80px;
    }
    .icon-checked {
        height: 20px;
        width: 20px;
        object-fit: contain;
        margin-right: 10px;
    }
    .left {
        .btn-cp {
            cursor: pointer;
            width: 108px;
            display: block;
            font-size: 13px;
            text-align: center;
            color: #ffffff;
            line-height: 34px;
            height: 34px;
            background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
            border-radius: 5px;
            margin-left: auto;
        }

        .btn-cp:hover {
            // color: #da213d;
            span {
                color: #da213d;
            }
        }
        span {
            font-size: 16px;
            color: #333;
        }
        .choose-good {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex: 1;
            margin-right: 68px;
        }
        .span-btn {
            color: #666;
            padding-left: 40px;
            b {
                font-size: 18px;
                padding: 0 4px;
            }
        }
    }
    .total-box {
        font-size: 16px;
        color: #333;
        margin-right: 70px;
        height: 60px;
        span {
            font-size: 24px;
            font-weight: 600;
            color: #da213d;
        }
        .discount {
            font-size: 14px;
            color: #999;
        }
    }
    .btn-r {
        height: 80px;
        width: 200px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #ffffff !important;
    }
}
.add-address-show {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 700px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
    z-index: 101;
    .title {
        display: flex;
        width: 100%;
        height: 67px;
        align-items: center;
        background: #fbf0f0;
        justify-content: center;
        > div:nth-of-type(1) {
            font-size: 21px;
            font-weight: bold;
            color: #da213d;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 30px;
            color: #999999;
            position: absolute;
            right: 32px;
            cursor: pointer;
        }
    }
    .add-input {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 40px;
        .scroll {
            height: 310px;
            width: 100%;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
            }
            .goods-itm {
                margin: 0 auto;
                width: 550px;
                height: 150px;
                border: 1px solid #eaa090;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
                .goods-img {
                    width: 126px;
                    height: 126px;
                }
                .goods-right {
                    margin-left: 20px;
                    .goods-tit {
                        font-size: 20px;
                        font-weight: bold;
                        text-align: justify;
                        color: #333333;
                        line-height: 26px;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .goods-choies {
                        font-size: 14px;
                        color: #999999;
                        margin-top: 14px;
                        .span1 {
                        }
                        .span2 {
                            margin-left: 60px;
                        }
                    }
                    .goods-price {
                        margin-top: 10px;
                        font-size: 20px;
                        font-weight: bold;
                        color: #da213d;
                    }
                }
            }
        }
    }
    .rule-form {
        width: 460px;
        button {
            width: 140px;
        }
    }
}
.email {
    display: flex;
    margin-top: 20px;
    .email-tit {
        font-size: 15px;
        width: 100px;
        line-height: 40px;
        span {
            color: #da213d;
            font-size: 15px;
        }
    }
    .el-input {
        width: 400px;
    }
}
.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    background-color: rgba($color: #000000, $alpha: 0.4);
}
.choose-type {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
    padding: 0 70px;
    box-sizing: border-box;
    .cancel {
        width: 242px;
        height: 46px;
        border: 1px solid #da213d;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #da213d;
        line-height: 46px;
        cursor: pointer;
    }
    .confirm {
        width: 240px;
        height: 44px;
        background: #da213d;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        cursor: pointer;
    }
}
.tab {
    display: flex;
    margin-top: 30px;
    .tabs {
        font-size: 18px;
        color: #666666;
        margin-right: 48px;
        cursor: pointer;
    }
    .tabs.select {
        color: #da213d;
        position: relative;
        font-weight: bold;
        &::before {
            width: 41px;
            height: 5px;
            background: #da213d;
            bottom: -10px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            content: "";
        }
    }
}
.line-ti {
    margin-top: 30px;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    .new {
        width: 110px;
        height: 34px;
        background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        margin-left: auto;
        line-height: 34px;
        &::before {
            height: 0;
        }
    }
    > div {
        color: #da213d;
        font-size: 18px;
        // border-bottom: 3px solid $color;
        // width: 112px;
        line-height: 36px;
        font-weight: bold;
        position: relative;
        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 72px;
            height: 3px;
            background: #da213d;
        }
    }
}
.history {
    width: 400px;
    margin: 20px auto 20px;
    .history-list {
        display: flex;
        flex-wrap: wrap;
        div {
            border-radius: 10px;
            padding: 5px;
            box-sizing: border-box;
            font-size: 16px;
            line-height: 16px;
            color: #999;
            background: #f8f8f8;
            margin: 0px 5px 5px;
            cursor: pointer;
            position: relative;
            img {
                position: absolute;
                right: -10px;
                top: -10px;
                width: 20px;
                height: 20px;
            }
        }
    }
}
.list {
    margin-top: 10px;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;

    box-sizing: border-box;
    min-height: 600px;
    .items {
        display: flex;
        align-items: center;
        float: left;
        .select-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .itm {
            min-height: 200px;
            margin-top: 30px;
            cursor: pointer;
            box-shadow: 0px 0px 5px 0px rgba(17, 17, 17, 0.16);
            width: 346px;
            box-sizing: border-box;
            margin-right: 15px;
            border-radius: 5px;
            background-size: 100% 100%;
            &:nth-child(3n) {
                margin-right: 0;
            }
            .order1 {
                display: flex;
                justify-content: space-between;
                margin-top: 12px;
                padding: 0 18px 0 13px;
                box-sizing: border-box;
                div {
                    &:nth-child(1) {
                        font-size: 13px;
                        line-height: 18px;
                        color: #333333;
                    }
                    &:nth-child(2) {
                        font-size: 13px;
                        line-height: 18px;
                        color: #333333;
                    }
                }
            }
            .order2 {
                display: flex;
                justify-content: space-between;
                padding: 0 18px 0 13px;
                margin-bottom: 15px;
                margin-top: 8px;
                box-sizing: border-box;

                div {
                    &:nth-child(1) {
                        font-size: 12px;
                        color: #666666;
                        line-height: 17px;
                    }
                    &:nth-child(2) {
                        font-size: 12px;
                        color: #3ca9d7;
                        line-height: 17px;
                    }
                }
                .pay {
                    color: #45b39c !important;
                }
                .ing {
                    color: #2052a3 !important;
                }
            }
            .order-status {
                font-size: 13px;
                color: #333333;
                line-height: 18px;
                display: flex;
                height: 40px;
                background: #ffffff;
                align-items: center;
                position: relative;
                padding: 0 10px;
                box-sizing: border-box;
                &::before {
                    border: 1px dashed #eee8e8;
                    position: absolute;
                    top: 0;
                    left: 9px;
                    right: 9px;
                    content: "";
                }
                .order-text {
                    width: 60px;
                    margin-right: 16px;
                }

                .el-progress {
                    display: flex;
                    flex: 1;
                }
            }
            .setting {
                display: flex;
                background: #fffafa;
                .setting-icon {
                    width: 46px;
                    height: 84px;
                    background: linear-gradient(
                        90deg,
                        #fff1ef 0%,
                        rgba(255, 248, 247, 0)
                    );
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
                .settings {
                    flex: 1;
                    height: 84px;
                    padding: 14px 10px 20px;
                    box-sizing: border-box;
                    .order-num {
                        font-size: 13px;
                        line-height: 13px;
                        font-weight: bold;
                        color: #da213d;
                        position: relative;
                        padding-left: 20px;
                        &::before {
                            position: absolute;
                            left: 0;
                            width: 5px;
                            border-radius: 100%;
                            height: 5px;
                            background: #ffffff;
                            border: 2px solid #da213d;
                            top: 0;
                            bottom: 0;
                            margin: auto 0;
                            content: "";
                        }
                    }
                    .title {
                        margin-top: 5px;
                        font-size: 15px;
                        font-weight: bold;
                        text-align: justify;
                        color: #da213d;
                        line-height: 22px;
                        color: #333333;
                        margin-left: 20px;
                    }
                }
            }

            .brand {
                margin-top: 15px;
                font-size: 16px;
                font-weight: bold;
                text-align: left;
                color: #333333;
                line-height: 16px;
            }
            .itm-b {
                margin-top: 10px;
                display: flex;
                font-size: 14px;
                color: #666666;
                line-height: 14px;
                justify-content: space-between;
                align-items: center;
                .itm-name {
                }
                .itm-line {
                    width: 2px;
                    height: 15px;
                    background: #666666;
                }
                .itm-date {
                }
            }
        }
    }
}
</style>